<template>
  <view class="tabbar flex">
    <view class="item flex col a-center j-center" :class="{'on':index==0}" @click="toPage('/pages/home/home')">
      <view class="icon">
        <i class="iconfont icon-home"></i>
      </view>
      <text class="text">首页</text>
    </view>
    <view class="item flex col a-center j-center" :class="{'on':index==1}" @click="toPage('/pages/allStudent/allStudent')">
      <view class="icon">
        <i class="iconfont icon-kehuzhongxin"></i>
      </view>
      <text class="text">所有学员</text>
    </view>
    <view class="item flex col a-center j-center" :class="{'on':index==2}" @click="toPage('/pages/mine/mine')">
      <view class="icon">
        <i class="iconfont icon-user-fill"></i>
      </view>
      <text class="text">个人中心</text>
    </view>
  </view>
</template>
<script>
  import {
    toPage
  } from '@/utils/index.js'

  export default {
    props: {
      index: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {

      }
    },

    methods: {
      toPage
    }
  }
</script>
<style scoped>
  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 50px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
  }

  .item {
    flex: 1;
    padding-top: 5px;
  }

  .item .icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 5rpx;
    font-size: 50rpx !important;
  }

  .item .text {
    font-size: 22rpx;
    color: #BFC4CC;
  }

  .item .icon i {
    font-size: 50rpx !important;
    color: #BFC4CC;
  }

  .item.on .text,
  .item.on .icon i {
    color: #2979FF;
  }
</style>